<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- pc -->
    <link rel="stylesheet" href="../static/css/ModSale.css" media="only screen and (max-height:1600px)" >
    <!-- 手机APP -->
    <link rel="stylesheet" href="../static/css/ModSaleApp.css" media="only screen and (min-height:1600px)" >
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card A" >
                        <ul>
                            <li>
                                <h8 style="line-height: 78px;">市场销售看板</h8>
                            </li>
                        </ul>

                    </div>
                    <div class="card B" >
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>客户</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="WaitPrtQty">0
                                </h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C" >
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>本月订单</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="MonthOrder">0</h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C" >
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>本年订单</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="YearOrder">0</h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>平均受注率</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="Col8Qty1">0</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>


        <div class="body_div">
            <div class="main-left">
                <div class="border-container3">
                    <div class="name-title">
                        营业额同期比
                    </div>
                    <div>
                        <div id="yinye"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container3">
                    <div class="name-title">
                        行业细分图
                    </div>
                    <div>
                        <div id="echarts_i"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="center">
                <div class="border-container2">
                    <div class="name-title">
                        报价与受注（套数）
                    </div>
                    <div>
                        <div id="shouzhu" style="width:100%;height: 270px; "></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container2">
                    <div class="name-title">
                        客户本年订单
                    </div>
                    <div>
                        <div id="zhulv" style="height: 300px; width: 100%;"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container2">
                    <div class="name-title">
                        本年订单走势
                    </div>
                    <div>
                        <div id="zhoushi" style="height: 300px; width: 100%;"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

            </div>
            <div class="main-right">
                <div class="border-container3">
                    <div class="name-title">
                        客户受注率
                    </div>
                    <div>
                        <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt1" :height=el_table_height4 :cell-style="{padding:3+'px'}">
                            <el-table-column type="index" width="50" label="序号">
                            </el-table-column>
                            <el-table-column prop="ClientCode" align="center" label="客户编号">
                            </el-table-column>
                            <el-table-column align="center" label="受注数">
                                <template slot-scope="scope">
                                    <div v-html="Kecutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="zong" width="80" align="center" label="受注率">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container3">
                    <div class="name-title">
                        地区分布图
                    </div>
                    <div>
                        <div id="diqu"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height4: 422,
                yinye: null,
                echarts_i: null,
                shouzhu: null,
                zhoushi: null,
                diqu: null,
                defaultDt1: [],
                option1: {
                    xAxis: {
                        type: 'category',
                        data: ['2020', '2021', '2022']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }]
                },
                option2: {
                    title: {
                        top: '2%',
                        textStyle: { //图例文字的样式
                            color: '#12f0e9 ',
                            fontSize: 20
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center',
                        textStyle: { //图例文字的样式
                            color: 'white ',
                            fontSize: 14

                        },
                    },
                    series: [{
                        top: '10%',
                        radius: ['40%', '70%'],
                        name: '行业',
                        type: 'pie',
                        // radius: '56%',
                        avoidLabelOverlap: false,
                        // color: 'yellow',
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: '#12f0e9'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [],
                    }]
                },
                option3: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        textStyle: {
                            color: '#00FFFFF'
                        }
                    },
                    grid: {

                        //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
                        left: "50px",
                        right: "10%",
                        bottom: "10%"

                    },
                    xAxis: [{
                        type: 'category',
                        color: 'white',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '受注报价套数',
                        nameTextStyle: {
                            color: "#FFF",
                        },
                        min: 0,
                        axisLabel: {
                            formatter: '{value} 套',
                            textStyle: { //改变xy轴上文字的颜色
                                color: "#FFF"
                            }
                        },

                    }, {
                        type: 'value',
                        name: '受注率',
                        nameTextStyle: {
                            color: "#FFF",

                        },
                        min: 0,
                        splitLine: {
                            //不显示分割线
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} %',
                            textStyle: { //改变xy轴上文字的颜色
                                color: "#FFF"
                            }
                        }
                    }],
                    series: [{
                        name: '报价',
                        type: 'bar',
                        data: [],
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    },
                                    position: '', //在上方显示(top) ('')中间
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }, {
                        name: '受注',
                        type: 'bar',
                        data: [],
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    },
                                    position: '', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }, {
                        name: '受注率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [],
                        formatter: '{value} %',
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value+"%";
                                        } else {
                                            return '';
                                        }
                                    },
                                    show: true,
                                    color: "#FFF"
                                }
                            }
                        }
                    }]
                },
                option4: {
                    tooltip: {
                        trigger: 'axis' //鼠标悬浮上去显示
                    },
                    xAxis: {
                        type: 'category',
                        data: ['WXKH-0007', 'WXKH-0002', 'PTKH-0011', 'WXKH-0001', 'WXKH-00103', 'WXKH-0018', 'WXKH-0046', 'PTKH-0069'],
                        axisLabel: {
                            interval: 0,
                            rotate: 28,
                            textStyle: { //改变xy轴上文字的颜色
                                color: "#FFF"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    series: [{
                        data: [150, 230, 224, 218, 135, 147, 260, 300],
                        type: 'bar',
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    },
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }]
                },
                option5: {
                    tooltip: {
                        trigger: 'axis' //鼠标悬浮上去显示
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    series: [{
                        symbol: "circle",
                        data: [150, 230, 224, 218, 135, 147, 260, 300, 1000, 850, 200],
                        type: 'line',
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: '#f28e0c'
                            },

                        },
                        itemStyle: {
                            normal: {
                                color: '#f28e0c',
                                label: {
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    },
                                    show: true,
                                    color: "#FFF"
                                }
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgb(242, 148, 26)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(229, 160, 71)' //   100% 处的颜色
                                }],
                                global: false // 缺省为 false

                            }
                        }
                    }]
                },
                option6: {
                    title: {
                        top: '2%',
                        textStyle: { //图例文字的样式
                            color: '#12f0e9 ',
                            fontSize: 20
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center',
                        textStyle: { //图例文字的样式
                            color: 'white ',
                            fontSize: 14

                        },
                    },
                    series: [{
                        name: '地区分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        top: '10%',
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: '#12f0e9'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: 1048,
                            name: '搜索引擎'
                        }, {
                            value: 735,
                            name: '直接访问'
                        }]
                    }]
                },
            }
        },
        methods: {

            GetTabelDate(that) {
                // 营业额同比
                GetCodeData("VB21102218015077", "Get", "value").then(function(res) {
                        var 营业 = []
                        res.rows.forEach(element => {

                            Object.values(element).forEach(item => {
                                if (element.type == "营业") {
                                    if (typeof(item) == "number") {
                                        营业.push(item)
                                    }
                                }
                            });
                        });
                        that.option1.series[0].data = 营业;
                        that.yinye.setOption(that.option1);
                    }),
                    //客户图形
                    GetCodeData("VB21092309075363", "Get", "value").then(function(res) {
                        that.option2.series[0].data = res.rows
                        that.echarts_i.setOption(that.option2);
                    }),
                    //报价与受注
                    GetCodeData("VB21100915464016", "Get", "value").then(function(res) {
                        var 报价 = []
                        var 受注 = []
                        var 受注率 = []

                        res.rows.forEach(element => {

                            Object.values(element).forEach(item => {
                                if (element.type == "报价") {
                                    if (typeof(item) == "number") {
                                        报价.push(item)
                                    }
                                } else if (element.type == "受注") {
                                    if (typeof(item) == "number") {
                                        受注.push(item)
                                    }
                                } else {
                                    if (typeof(item) == "number") {
                                        受注率.push(item)
                                    }
                                }
                            });
                        });
                        that.option3.series[0].data = 报价
                        that.option3.series[1].data = 受注
                        that.option3.series[2].data = 受注率
                        that.shouzhu.setOption(that.option3);
                    }),
                    //客户本年营业额
                    GetCodeData("VB21101409264834", "Get", "value").then(function(res) {
                         //echarts折线图
                         var chartDom = document.getElementById('zhulv');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData = []; //系列数据

                            if (res.rows != null && res.rows.length > 0) {
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["ClientCode"]);
                                    seriesData.push(res.rows[i]["TaxAmtOrd"]);
                                }
                            }

                            var option = {
                                xAxis: {
                                    type: 'category',
                                    data: xAxisData,
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 28,
                                        textStyle: { //改变xy轴上文字的颜色
                                            color: "#FFF"
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: seriesData,
                                    type: 'line',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: { //数值样式
                                            color: 'white'
                                        },
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        }
                                    }
                                }]
                            };

                            myChart.setOption(option);
                    }),
                    //本年订单走势
                    GetCodeData("VB21101317062826", "Get", "value").then(function(res) {
                        var 本年走势 = []
                        res.rows.forEach(element => {

                            Object.values(element).forEach(item => {
                                if (element.type == "本年走势") {
                                    if (typeof(item) == "number") {
                                        本年走势.push(item)
                                    }
                                }
                            });
                        });
                        that.option5.series[0].data = 本年走势;
                        that.zhoushi.setOption(that.option5);
                    }),
                    // 客户受注率
                    GetCodeData("VB21101314144432", "Get", "value").then(function(res) {
                        that.defaultDt1 = res.rows
                    }),
                    //地区分布图
                    GetCodeData("VB21102014515661", "Get", "value").then(function(res) {
                        that.option6.series[0].data = res.rows
                        that.diqu.setOption(that.option6);
                    }),
                    //客户总数
                    GetCodeData("VB21092315174260", "Get", "value").then(function(res) {
                        $('#WaitPrtQty').text("" + res.rows[0].Column1 + "家")
                    }),
                    //本月订单金额
                    GetCodeData("VB21101515051178", "Get", "value").then(function(res) {
                        $('#MonthOrder').text("" + res.rows[0].Total + "万元")
                    }),
                    //本年订单金额
                    GetCodeData("VB21101514505452", "Get", "value").then(function(res) {
                        $('#YearOrder').text("" + res.rows[0].zong + "万元")
                    })
                    //平均受注率
                GetCodeData("VB21101616275863", "Get", "value").then(function(res) {
                    $('#Col8Qty1').text("" + res.rows[0].year + "")
                })
            },
            //客户受注率
            Kecutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.shouzhu * 100 / cellValue.row.baojia;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.shouzhu < cellValue.row.baojia) {
                        _color = "#00a000";
                    } else if (cellValue.row.shouzhu > cellValue.row.baojia) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }

                    _html += ("<div  style='position: relative; width:120px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                        "</div>" +
                        "<div style='position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.shouzhu + "/" + cellValue.row.baojia + "</div>" +
                        "</div>" +
                        "");
                    return _html;
                }
            },
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1])
            var that = this
            setTimeout(function() {
                that.echarts_i = echarts.init(document.getElementById('echarts_i')),
                    that.GetTabelDate(that);
                that.yinye = echarts.init(document.getElementById('yinye')),
                    that.GetTabelDate(that);
                that.shouzhu = echarts.init(document.getElementById('shouzhu')),
                    that.GetTabelDate(that);
                that.zhoushi = echarts.init(document.getElementById('zhoushi')),
                    that.GetTabelDate(that);
                that.diqu = echarts.init(document.getElementById('diqu')),
                    that.GetTabelDate(that);
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>